<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link href="css/widgets.css" rel="stylesheet"/>
    <title>场景</title>

    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="css/style.css"/>

    <link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="css/contextMenu.css"/>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>


    <script type="text/javascript" src="js/Sandcastle-header.js"></script>
    <script type="text/javascript" src="js/require.js"></script>
    <script type="text/javascript" src="js/Cesium.js"></script>
    <script type="text/javascript" src="js/jquery.contextMenu.min.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>

        html, body, #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
<style>
    @import url(css/bucket.css);
</style>


<input id="lng" type="text" style="display: none;"/>
<input id="lat" type="text" style="display: none;"/>
<input id="hig" type="text" style="display: none;"/>

<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>

<nav class="navbar navbar-inverse navbar-fixed-top" id="1-wrapper" role="navigation"
     style="background-color: rgba(1, 1, 1, 0.5);width: 84.5%;">
    <div class="row">
        <div class="col-md-1">
        </div>
        <div class="col-md-1">
            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                    title="状态正常">空速
            </button>
        </div>
        <div class="col-md-1">
            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                    title="状态正常">高度
            </button>
        </div>
        <div class="col-md-1">
            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                    title="状态正常">姿态
            </button>
        </div>
        <div class="col-md-1">
            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                    title="状态正常">系统
            </button>

        </div>

        <div class="col-md-1">
            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                    title="状态正常">通讯
            </button>
        </div>

        <div class="col-md-1">
            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                    title="状态正常">发动机
            </button>
        </div>

        <div class="col-md-1">
            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                    title="状态正常">INIT
            </button>

        </div>
        <div class="col-md-1">
            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                    title="状态正常">地面测试
            </button>

        </div>
        <div class="col-md-1">
            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                    title="状态正常">降落伞
            </button>

        </div>
        <div class="col-md-1">
            <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom"
                    title="状态正常">能源
            </button>
        </div>
    </div>
</nav>

<!-- /#sidebar-wrapper -->
<div id="toolbar">
    <!--<div>Height</div>-->
    <!--<input type="range" min="-100.0" max="100.0" step="1" data-bind="value: tz, valueUpdate: 'input'">-->
    <!--<input type="text" size="5" data-bind="value: tz">&ndash;&gt;&ndash;&gt;-->
    <!--<input type="range" value="50" id="data1" >-->


    <!-- 侧滑菜单 -->
    <div id="wrapper">
        <div class="overlay"></div>

        <!-- Sidebar -->
        <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation">
            <ul class="nav sidebar-nav">
                <li class="sidebar-brand">
                    <a href="#">
                        体系建模
                    </a>
                </li>
                <br/>
                <br/>
                <li>
                    <!--<a href="#"><i class="fa fa-fw fa-home"></i> Home</a>-->
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon" id="1">参数一</span>
                        <input type="text" class="form-control" placeholder="" aria-describedby="sizing-addon3">
                    </div>
                </li>
                <li>
                    <!--<a href="#"><i class="fa fa-fw fa-folder"></i> Page one</a>-->
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon" id="2">参数二</span>
                        <input type="text" class="form-control" placeholder="" aria-describedby="sizing-addon3">
                    </div>
                </li>
                <li>
                    <!--<a href="#"><i class="fa fa-fw fa-file-o"></i> Second page</a>-->
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon" id="3">参数三</span>
                        <input type="text" class="form-control" placeholder="" aria-describedby="sizing-addon3">
                    </div>
                </li>
                <li>
                    <!--<a href="#"><i class="fa fa-fw fa-cog"></i> Third page</a>-->
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon" id="4">参数四</span>
                        <input type="text" class="form-control" placeholder="" aria-describedby="sizing-addon3">
                    </div>
                </li>
                <li>
                    <!--<a href="#"><i class="fa fa-fw fa-cog"></i> Third page</a>-->
                    <div class="input-group input-group-sm">
                        <span class="input-group-addon" id="5">参数五</span>
                        <input type="text" class="form-control" placeholder="" aria-describedby="sizing-addon3">
                    </div>
                </li>
                <br/>
                <br/>
                <br/>

                <button type="button" class="btn btn-default btn-lg">
                    提交
                </button>
            </ul>
        </nav>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">
            <button type="button" class="hamburger is-closed animated fadeInLeft" data-toggle="offcanvas">
                <span class="hamb-top"></span>
                <span class="hamb-middle"></span>
                <span class="hamb-bottom"></span>
            </button>

            <div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            >
        </div>
        <!-- /#page-content-wrapper -->

    </div>
</div>

<!--右边栏-->
<div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4"></div>
    <div class="col-md-4">
        <div class="col-xs-offset-6 col-md-7">
            <a href="#" class="thumbnail" style="padding: 0px;">
                <img src="img/model/发射.gif" alt="...">
            </a>
        </div>

        <div class="col-xs-offset-5 col-md-10">

            <div class="col-md-4 col-xs-offset-1">
                <div class="panel panel-default">
                    <div class="panel-heading">导弹井</div>
                    <div class="panel-body">
                        <div>
                            <img src="img/model/导弹井.jpg" style="width: 100%">
                        </div>
                        <hr/>
                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                    aria-haspopup="true"
                                    aria-expanded="false" style="font-size: 5px;">
                                参数 <span class="caret"></span>
                            </button>

                            <button style="font-size: 5px;" type="button" class="btn btn-default dropdown-toggle"
                                    onclick="createModel('model/daodanjing.gltf')"><a>确认添加</a></button>

                            <ul class="dropdown-menu">
                                <li><a href="#">经度<input id="jinglng" type="text" style="color: #000000"/></a></li>
                                <li><a href="#">纬度<input id="jinglat" type="text" style="color: #000000"/></a></li>
                                <li><a href="#">高度<input id="jinghig" type="text" style="color: #000000"/></a></li>
                            </ul>
                        </div>
                    </div>
                </div>


                <div class="panel panel-default">
                    <div class="panel-heading">导弹车</div>
                    <div class="panel-body">
                        <div>
                            <img src="img/model/导弹车.jpg" style="width: 100%">
                        </div>
                        <hr/>
                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                    aria-haspopup="true"
                                    aria-expanded="false" style="font-size: 5px;">
                                参数 <span class="caret"></span>
                            </button>

                            <button style="font-size: 5px;" type="button" class="btn btn-default dropdown-toggle"
                                    onclick="createModel('model/daodanche.gltf')"><a>确认添加</a></button>

                            <ul class="dropdown-menu">
                                <li><a href="#">经度<input id="daodanchelng" type="text" style="color: #000000"/></a></li>
                                <li><a href="#">纬度<input id="daodanchelat" type="text" style="color: #000000"/></a></li>
                                <li><a href="#">高度<input id="daodanchehig" type="text" style="color: #000000"/></a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-heading">飞机</div>
                    <div class="panel-body">
                        <div>
                            <img src="img/model/飞机.jpg" style="width: 100%">
                        </div>
                        <hr/>
                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                    aria-haspopup="true"
                                    aria-expanded="false" style="font-size: 5px;">
                                参数 <span class="caret"></span>
                            </button>

                            <button style="font-size: 5px;" type="button" class="btn btn-default dropdown-toggle"
                                    onclick="createModel('model/CesiumAir/Cesium_Air.gltf')"><a>确认添加</a></button>

                            <ul class="dropdown-menu">
                                <li><a href="#">经度<input id="feijilng" type="text" style="color: #000000"/></a></li>
                                <li><a href="#">纬度<input id="feijilat" type="text" style="color: #000000"/></a></li>
                                <li><a href="#">高度<input id="feijihig" type="text" style="color: #000000"/></a></li>
                            </ul>
                        </div>
                    </div>
                </div>


            </div>


            <div class="col-md-4 col-xs-offset-0">
                <div class="panel panel-default">
                    <div class="panel-heading">指挥中心</div>
                    <div class="panel-body">
                        <div>
                            <img src="img/model/指挥中心.jpg" style="width: 100%">
                        </div>
                        <hr/>
                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                    aria-haspopup="true"
                                    aria-expanded="false" style="font-size: 5px;">
                                参数 <span class="caret"></span>
                            </button>

                            <button style="font-size: 5px;" type="button" class="btn btn-default dropdown-toggle"
                                    onclick="createModel('model/huiyishi.gltf')"><a>确认添加</a></button>

                            <ul class="dropdown-menu">
                                <li><a href="#">经度<input id="zhihuizhongxinlng" type="text" style="color: #000000"/></a>
                                </li>
                                <li><a href="#">纬度<input id="zhihuizhongxinlat" type="text" style="color: #000000"/></a>
                                </li>
                                <li><a href="#">高度<input id="zhihuizhongxinhig" type="text" style="color: #000000"/></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-heading">雷达</div>
                    <div class="panel-body">
                        <div>
                            <img src="img/model/雷达.jpg" style="width: 100%">
                        </div>
                        <hr/>
                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                    aria-haspopup="true"
                                    aria-expanded="false" style="font-size: 5px;">
                                参数 <span class="caret"></span>
                            </button>

                            <button style="font-size: 5px;" type="button" class="btn btn-default dropdown-toggle"
                                    onclick="createModel('model/leida.gltf')"><a>确认添加</a></button>

                            <ul class="dropdown-menu">
                                <li><a href="#">经度<input id="leidalng" type="text" style="color: #000000"/></a></li>
                                <li><a href="#">纬度<input id="leidalat" type="text" style="color: #000000"/></a></li>
                                <li><a href="#">高度<input id="leidahig" type="text" style="color: #000000"/></a></li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="panel panel-default">
                    <div class="panel-heading">导弹</div>
                    <div class="panel-body">
                        <div>
                            <img src="img/model/导弹.jpg" style="width: 100%">
                        </div>
                        <hr/>
                        <!-- Single button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                    aria-haspopup="true"
                                    aria-expanded="false" style="font-size: 5px;">
                                参数 <span class="caret"></span>
                            </button>

                            <button style="font-size: 5px;" type="button" class="btn btn-default dropdown-toggle"
                                    onclick="createModel('model/daodan.gltf')"><a>确认添加</a></button>

                            <ul class="dropdown-menu">
                                <li><a href="#">经度<input id="daodanlng" type="text" style="color: #000000"/></a></li>
                                <li><a href="#">纬度<input id="daodanlat" type="text" style="color: #000000"/></a></li>
                                <li><a href="#">高度<input id="daodanhig" type="text" style="color: #000000"/></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>


        </div>

    </div>
</div>

<script>
    var viewer = new Cesium.Viewer('cesiumContainer', {
        // imageryProvider: Cesium.createOpenStreetMapImageryProvider({
        //     url: 'https://a.tile.openstreetmap.org/'
        // }),

        // imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        //     url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
        // }),

        // shouldAnimate: false,
        // infoBox: false,
        // selectionIndicator: false,
        // shadows: false,
        // geocoder: false,
        // homeButton: false,
        // sceneModePicker: false,
        // baseLayerPicker: false,
        // navigationHelpButton: false,
        // animation: false,
        // timeline: false,
        // fullscreenButton: false,
        /*
        * 动画播放
        * */
        shouldAnimate: true
    });



    var provider = new Cesium.WebMapServiceImageryProvider({
        url: 'http://localhost:8080/geoserver/cesium/wms',
        layers: 'cesium:test',
        parameters: {
            service: 'WMS',
            format: 'image/png',
            transparent: true,
        }
    });

    var lon = 100.980071;  //经度
    var lat = 39.770983;   // 纬度

    var scanColor = new Cesium.Color(1.0, 0.0, 0.0, 1);
    var CartographicCenter = new Cesium.Cartographic(Cesium.Math.toRadians(lon), Cesium.Math.toRadians(lat), 0);

    window.setTimeout(function () {
        AddCircleScanPostStage(viewer, CartographicCenter, 5, scanColor, 4000);
    }, 2500);

    viewer.imageryLayers.addImageryProvider(provider);
    viewer._cesiumWidget._creditContainer.style.display = "none";

    test(viewer);
    test2(viewer);
    test3(viewer);


    var scene = viewer.scene;
    //显示坐标
    // var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);


    var modelId = '';
    handler.setInputAction(function (movement) {

        var pick = viewer.scene.pick(movement.position);
        console.log("========>" + pick.id.id);
        modelId = pick.id.id;


    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);


    handler.setInputAction(function (click) {
        console.log('中键单击事​​件：', click.position);
        console.log('中键单击事​​件：', modelId);

        viewer.entities.removeById(modelId);
    }, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);

    handler.setInputAction(function (movement) {
        var cartesian = scene.camera.pickEllipsoid(movement.endPosition, ellipsoid);
        var ellipsoid = scene.globe.ellipsoid;
        if (cartesian) { //能获取，显示坐标
            var cartographic = ellipsoid.cartesianToCartographic(cartesian);
            var coords = '经度' + Cesium.Math.toDegrees(cartographic.longitude).toFixed(6) + ', ' + '纬度' + Cesium.Math.toDegrees(cartographic.latitude).toFixed(6) + '，' + '高度' + Math.ceil(viewer.camera.positionCartographic.height);
            // document.getElementByIdx_x_x('coords').innerHTML = coords; document.getElementByIdx_x_x('coords').style.display = '';

            // console.log("-->" + coords)

            $("#lng").val(Cesium.Math.toDegrees(cartographic.longitude).toFixed(6));
            $("#lat").val(Cesium.Math.toDegrees(cartographic.latitude).toFixed(6));
            $("#hig").val(Math.ceil(viewer.camera.positionCartographic.height));

            $("#daodanlng").val(Cesium.Math.toDegrees(cartographic.longitude).toFixed(6))
            $("#daodanlat").val(Cesium.Math.toDegrees(cartographic.latitude).toFixed(6))
            $("#daodanhig").val(Math.ceil(viewer.camera.positionCartographic.height))

            $("#daodanchelng").val(Cesium.Math.toDegrees(cartographic.longitude).toFixed(6))
            $("#daodanchelat").val(Cesium.Math.toDegrees(cartographic.latitude).toFixed(6))
            $("#daodanchehig").val(Math.ceil(viewer.camera.positionCartographic.height))

        } else { //不能获取不显示
            // document.getElementByIdx_x_x('coords').style.display = 'none';
            console.log("-->" + 不能获取不显示)
        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);


    var params = {
        // 100.980228,39.771246
        // tx: 85.079709,    //模型中心X轴坐标（经度，单位：十进制度）   
        // ty: 33.930379,     //模型中心Y轴坐标（纬度，单位：十进制度）   
        tx: 100.980228,    //模型中心X轴坐标（经度，单位：十进制度）   
        ty: 39.771246,     //模型中心Y轴坐标（纬度，单位：十进制度）   
        tz: 10,      //模型中心Z轴坐标（高程，单位：米）   
        rx: 0,     //X轴（经度）方向旋转角度（单位：度）   
        ry: 0,     //Y轴（纬度）方向旋转角度（单位：度）   
        rz: 0      //Z轴（高程）方向旋转角度（单位：度）
    };


    function update3dtilesMaxtrix(tileset) {
        //旋转
        var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));
        var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));
        var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));
        var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
        var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
        var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
        //平移
        var position = Cesium.Cartesian3.fromDegrees(params.tx, params.ty, params.tz);
        var m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
        //旋转、平移矩阵相乘
        Cesium.Matrix4.multiply(m, rotationX, m);
        Cesium.Matrix4.multiply(m, rotationY, m);
        Cesium.Matrix4.multiply(m, rotationZ, m);    //赋值给tileset   
        tileset._root.transform = m;
    }

    //调用示例
    function test(viewer) {
        viewer.scene.globe.depthTestAgainstTerrain = true;
        var url = "model/changjing2/tileset.json";
        var tileset = new Cesium.Cesium3DTileset({url: url});

        var primitive1 = viewer.scene.primitives.add(tileset);

        primitive1.readyPromise.then(function (t) {
            var originalSphere = t.boundingSphere;
            var radius = originalSphere.radius;
            viewer.zoomTo(t, new Cesium.HeadingPitchRange(0.5, -0.5, radius * 4.0));
            //平移、贴地、旋转模型
            update3dtilesMaxtrix(tileset);

        }).otherwise(function (error) {

            var msg = JSON.stringify(error);

            console.log("msg ------------->" + msg);
        });
    }

    /**
     * 敌方导弹
     * */
    function test2(view) {
        view.scene.globe.enableLighting = true;

        let data = [];
        data[0] = [
            {longitude: 100.980228, dimension: 39.771246, height: 100, time: 6},
            {longitude: 100.980228, dimension: 39.771246, height: 90, time: 7},
            {longitude: 100.980228, dimension: 39.771246, height: 80, time: 8},
            {longitude: 100.980228, dimension: 39.771246, height: 70, time: 9},
            {longitude: 100.980228, dimension: 39.771246, height: 60, time: 10},
            {longitude: 100.980228, dimension: 39.771246, height: 50, time: 11},
            {longitude: 100.980228, dimension: 39.771246, height: 40, time: 12},
            {longitude: 100.980228, dimension: 39.771246, height: 30, time: 13},
            {longitude: 100.980228, dimension: 39.771246, height: 20, time: 14},
            {longitude: 100.980228, dimension: 39.771246, height: 10, time: 15},
            {longitude: 100.980228, dimension: 39.771246, height: 1, time: 16},
            {longitude: 100.980228, dimension: 39.771246, height: -10, time: 18},
        ];

        // 起始时间
        let start = Cesium.JulianDate.fromDate(new Date(2019, 8, 19));
        // 结束时间
        let stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());
        // 设置始时钟始时间
        view.clock.startTime = start.clone();
        // 设置时钟当前时间
        view.clock.currentTime = start.clone();
        // 设置始终停止时间
        view.clock.stopTime = stop.clone();
        // 时间速率，数字越大时间过的越快
        view.clock.multiplier = 10;
        // 时间轴
        view.timeline.zoomTo(start, stop);
        // 循环执行,即为2，到达终止时间，重新从起点时间开始
        view.clock.clockRange = Cesium.ClockRange.LOOP_STOP;

        // // 镜头飞跃
        // view.camera.flyTo({
        //     destination:Cesium.Cartesian3.fromDegrees(116.405419,32.073514,500000)
        // })

        for (let j = 0; j < data.length; j++) {
            let property = computeFlight(data[j]);
            // 添加模型
            let planeModel = view.entities.add({
                // 和时间轴关联
                availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
                    start: start,
                    stop: stop
                })]),
                position: property,
                // 根据所提供的速度计算模型的朝向
                orientation: new Cesium.VelocityOrientationProperty(property),
                // 模型数据
                model: {
                    uri: 'model/laixidantou.gltf',
                }
            });
        }


        /**
         * 计算飞行
         * @param source 数据坐标
         * @returns {SampledPositionProperty|*}
         */
        function computeFlight(source) {
            // 取样位置 相当于一个集合
            let property = new Cesium.SampledPositionProperty();
            console.log("computeFlight property" + property)

            for (let i = 0; i < source.length; i++) {
                let time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate);
                let position = Cesium.Cartesian3.fromDegrees(source[i].longitude, source[i].dimension, source[i].height);
                // 添加位置，和时间对应
                property.addSample(time, position);
            }
            return property;
        }

    }


    /**
     * 我方导弹
     * */
    function test3(view) {
        view.scene.globe.enableLighting = true;

        let data = [];
        data[0] = [

            {longitude: 100.980228, dimension: 39.771246, height: -10, time: 25},
            {longitude: 100.980228, dimension: 39.771246, height: 5, time: 26},
            {longitude: 100.980228, dimension: 39.771246, height: 1, time: 27},
            {longitude: 100.980228, dimension: 39.771246, height: 4, time: 28},
            {longitude: 100.980228, dimension: 39.771246, height: 6, time: 29},
            {longitude: 100.980228, dimension: 39.771246, height: 8, time: 30},
            {longitude: 100.980228, dimension: 39.771246, height: 10, time: 31},
            {longitude: 100.980228, dimension: 39.771246, height: 12, time: 32},
            {longitude: 100.980228, dimension: 39.771246, height: 20, time: 33},
            {longitude: 100.980228, dimension: 39.771246, height: 25, time: 34},
            {longitude: 100.980228, dimension: 39.771246, height: 30, time: 35},
            {longitude: 100.980228, dimension: 39.771246, height: 35, time: 36},
            {longitude: 100.980228, dimension: 39.771246, height: 40, time: 37},
            {longitude: 100.980228, dimension: 39.771246, height: 45, time: 38},
            {longitude: 100.980228, dimension: 39.771246, height: 50, time: 39},
            {longitude: 100.980228, dimension: 39.771246, height: 55, time: 40},
            {longitude: 100.980228, dimension: 39.771246, height: 60, time: 41},
            {longitude: 100.980228, dimension: 39.771246, height: 65, time: 42},
            {longitude: 100.980228, dimension: 39.771246, height: 70, time: 43},
            {longitude: 100.980228, dimension: 39.771246, height: 75, time: 44},
            {longitude: 100.980228, dimension: 39.771246, height: 80, time: 45},
            {longitude: 100.980228, dimension: 39.771246, height: 85, time: 46},
        ];

        // 起始时间
        let start = Cesium.JulianDate.fromDate(new Date(2019, 8, 19));
        // 结束时间
        let stop = Cesium.JulianDate.addSeconds(start, 90, new Cesium.JulianDate());
        // 设置始时钟始时间
        view.clock.startTime = start.clone();
        // 设置时钟当前时间
        view.clock.currentTime = start.clone();
        // 设置始终停止时间
        view.clock.stopTime = stop.clone();
        // 时间速率，数字越大时间过的越快
        view.clock.multiplier = 10;
        // 时间轴
        view.timeline.zoomTo(start, stop);
        // 循环执行,即为2，到达终止时间，重新从起点时间开始
        view.clock.clockRange = Cesium.ClockRange.LOOP_STOP;

        // // 镜头飞跃
        // view.camera.flyTo({
        //     destination:Cesium.Cartesian3.fromDegrees(116.405419,32.073514,500000)
        // })

        for (let j = 0; j < data.length; j++) {
            let property = computeFlight(data[j]);
            // 添加模型
            let planeModel = view.entities.add({
                // 和时间轴关联
                availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
                    start: start,
                    stop: stop
                })]),
                position: property,
                // 根据所提供的速度计算模型的朝向
                orientation: new Cesium.VelocityOrientationProperty(property),
                // 模型数据
                model: {
                    uri: 'model/testdaodan.gltf',
                }
            });
        }


        /**
         * 计算飞行
         * @param source 数据坐标
         * @returns {SampledPositionProperty|*}
         */
        function computeFlight(source) {
            // 取样位置 相当于一个集合
            let property = new Cesium.SampledPositionProperty();
            console.log("computeFlight property" + property)

            for (let i = 0; i < source.length; i++) {
                let time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate);
                let position = Cesium.Cartesian3.fromDegrees(source[i].longitude, source[i].dimension, source[i].height);
                // 添加位置，和时间对应
                property.addSample(time, position);
            }
            return property;
        }

    }

    /**
     * 生成模型
     **/
    function createModel(url, id) {
        console.log(url)
        var position = Cesium.Cartesian3.fromDegrees($("#lng").val(), $("#lat").val(), $("#hig").val());
        // var position = Cesium.Cartesian3.fromDegrees(100.980302, 39.770788, 8);
        var heading = Cesium.Math.toRadians(135);
        var pitch = 0;
        var roll = 0;
        var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
        var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr);

        var entity = viewer.entities.add({
            id: id,
            name: url,
            position: position,
            orientation: orientation,
            model: {
                uri: url,
            }
        });
        viewer.trackedEntity = entity;
    }


    /*
     添加扫描线 depth关闭   lon:-74.01296152309055 lat:40.70524201566827 height:129.14366696393927
     viewer
     cartographicCenter 扫描中心
     maxRadius 最大半径 米
     scanColor 扫描颜色
     duration 持续时间 毫秒
     */
    function AddCircleScanPostStage(viewer, cartographicCenter, maxRadius, scanColor, duration) {
        var ScanSegmentShader =
            "uniform sampler2D colorTexture;\n" +
            "uniform sampler2D depthTexture;\n" +
            "varying vec2 v_textureCoordinates;\n" +
            "uniform vec4 u_scanCenterEC;\n" +
            "uniform vec3 u_scanPlaneNormalEC;\n" +
            "uniform float u_radius;\n" +
            "uniform vec4 u_scanColor;\n" +
            "vec4 toEye(in vec2 uv, in float depth)\n" +
            " {\n" +
            " vec2 xy = vec2((uv.x * 2.0 - 1.0),(uv.y * 2.0 - 1.0));\n" +
            " vec4 posInCamera =czm_inverseProjection * vec4(xy, depth, 1.0);\n" +
            " posInCamera =posInCamera / posInCamera.w;\n" +
            " return posInCamera;\n" +
            " }\n" +
            "vec3 pointProjectOnPlane(in vec3 planeNormal, in vec3 planeOrigin, in vec3 point)\n" +
            "{\n" +
            "vec3 v01 = point -planeOrigin;\n" +
            "float d = dot(planeNormal, v01) ;\n" +
            "return (point - planeNormal * d);\n" +
            "}\n" +
            "float getDepth(in vec4 depth)\n" +
            "{\n" +
            "float z_window = czm_unpackDepth(depth);\n" +
            "z_window = czm_reverseLogDepth(z_window);\n" +
            "float n_range = czm_depthRange.near;\n" +
            "float f_range = czm_depthRange.far;\n" +
            "return (2.0 * z_window - n_range - f_range) / (f_range - n_range);\n" +
            "}\n" +
            "void main()\n" +
            "{\n" +
            "gl_FragColor = texture2D(colorTexture, v_textureCoordinates);\n" +
            "float depth = getDepth( texture2D(depthTexture, v_textureCoordinates));\n" +
            "vec4 viewPos = toEye(v_textureCoordinates, depth);\n" +
            "vec3 prjOnPlane = pointProjectOnPlane(u_scanPlaneNormalEC.xyz, u_scanCenterEC.xyz, viewPos.xyz);\n" +
            "float dis = length(prjOnPlane.xyz - u_scanCenterEC.xyz);\n" +
            "if(dis < u_radius)\n" +
            "{\n" +
            "float f = 1.0 -abs(u_radius - dis) / u_radius;\n" +
            "f = pow(f, 4.0);\n" +
            "gl_FragColor = mix(gl_FragColor, u_scanColor, f);\n" +
            "}\n" +
            "}\n";
        var _Cartesian3Center = Cesium.Cartographic.toCartesian(cartographicCenter);
        var _Cartesian4Center = new Cesium.Cartesian4(_Cartesian3Center.x, _Cartesian3Center.y, _Cartesian3Center.z, 1);
        var _CartographicCenter1 = new Cesium.Cartographic(cartographicCenter.longitude, cartographicCenter.latitude, cartographicCenter.height + 500);
        var _Cartesian3Center1 = Cesium.Cartographic.toCartesian(_CartographicCenter1);
        var _Cartesian4Center1 = new Cesium.Cartesian4(_Cartesian3Center1.x, _Cartesian3Center1.y, _Cartesian3Center1.z, 1);
        var _time = (new Date()).getTime();
        var _scratchCartesian4Center = new Cesium.Cartesian4();
        var _scratchCartesian4Center1 = new Cesium.Cartesian4();
        var _scratchCartesian3Normal = new Cesium.Cartesian3();
        var ScanPostStage = new Cesium.PostProcessStage({
            fragmentShader: ScanSegmentShader,
            uniforms: {
                u_scanCenterEC: function () {
                    return Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);
                },
                u_scanPlaneNormalEC: function () {
                    var temp = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center, _scratchCartesian4Center);
                    var temp1 = Cesium.Matrix4.multiplyByVector(viewer.camera._viewMatrix, _Cartesian4Center1, _scratchCartesian4Center1);
                    _scratchCartesian3Normal.x = temp1.x - temp.x;
                    _scratchCartesian3Normal.y = temp1.y - temp.y;
                    _scratchCartesian3Normal.z = temp1.z - temp.z;
                    Cesium.Cartesian3.normalize(_scratchCartesian3Normal, _scratchCartesian3Normal);
                    return _scratchCartesian3Normal;
                },
                u_radius: function () {
                    return maxRadius * (((new Date()).getTime() - _time) % duration) / duration;
                },
                u_scanColor: scanColor
            }
        });
        viewer.scene.postProcessStages.add(ScanPostStage);

        var trigger = $('.hamburger'),
            overlay = $('.overlay'),
            isClosed = false;
        trigger.click(function () {
            hamburger_cross();
        });

        function hamburger_cross() {
            if (isClosed == true) {
                overlay.hide();
                trigger.removeClass('is-open');
                trigger.addClass('is-closed');
                isClosed = false;
            } else {
                overlay.show();
                trigger.removeClass('is-closed');
                trigger.addClass('is-open');
                isClosed = true;
            }
        }

        $('[data-toggle="offcanvas"]').click(function () {
            $('#wrapper').toggleClass('toggled');
        });
    }

</script>
</body>
</html>
